<template>
  
  <div style="background-color: #ececec; padding: 20px">
    <a-row :gutter="4">
      <a-col span="3">
        <a-card title="头像" :bordered="false" style="height: 100%;">
          <a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
            <template #icon>
              <AntDesignOutlined />
            </template>
          </a-avatar>
        </a-card>
      </a-col>
      <a-col span="20">
        <a-card title="信息" :bordered="false" style="height:100%;">
          <template #extra>
            <edit-outlined key="edit"  @click="editUser"/>
            <ellipsis-outlined key="ellipsis" style="margin-left: 20px;" @click="userMore"/>
            <logout-outlined style="margin-left: 20px;" @click="logout"/>
          </template>
          <a-card title="用户名">
            <template #extra>
              {{currentUser.userName}}
            </template>
          </a-card>
          <a-card title="accessKey">
            <template #extra>
              {{currentUser.accessKey}}
            </template>
          </a-card>
          <a-card title="secretkey">
            <template #extra>
              {{currentUser.secretKey}}
            </template>
          </a-card>
        </a-card>
      </a-col>
    </a-row>
  </div>
  <div>
    <a-table :columns="columns" :data-source="interfaceData" bordered>
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a>{{ text }}</a>
        </template>
      </template>
      
      <template #title>
        <h3>接口信息表</h3>
      </template>
    </a-table>
  </div>
</template>




<script setup lang="ts">

import {onMounted,ref} from 'vue'
import {useRouter} from 'vue-router'
import axios from '@/config/axios'
import { LogoutOutlined, 
          EditOutlined, 
          EllipsisOutlined,
        AntDesignOutlined } from '@ant-design/icons-vue';

onMounted(()=>{
  getCurrentUser()
  getInterfaceData()
})

const interfaceData = ref([{leftNum:''}])


const router = useRouter()
const currentUser = ref([])


const getCurrentUser = async()=>{
  await axios.get('/user/get/login').then((res)=>{
    currentUser.value = res.data.data
    console.log(res.data.data);
  })
}

const getInterfaceData = async()=>{
  const res = await axios.get('/interfaceInfo/list')
  interfaceData.value = res.data.data
  const result = await axios.get("/userInterface/list")
  for(var i=0;i<result.data.data.length;i++){
    interfaceData.value[i].leftNum = result.data.data[i].leftNum
  }
}




const columns = [
  {
    title: '接口名称',
    dataIndex: 'ifname',
    width: '25%',
  },
  {
    title: '接口描述',
    dataIndex: 'description',
    width: '25%',
  },
  {
    title: '接口方法',
    dataIndex: 'method',
    width: '25%',
  },
  {
    title: '调用次数',
    dataIndex: 'leftNum',
    width: '25%',
  },
];
const getGender = (number)=>{
  if(number ==1 ) return '男'
  else return '女'
}
//todo 编辑
const editUser = ()=>{
  alert("todo修改信息")
}
//todo 更多
const userMore = ()=>{
  alert("todo展示更多信息")
}

const logout = ()=>{
    axios.post('user/logout').then(()=>{
    router.push('/user/login')
  })
}
</script>